<template>
<div>
  <div class="scroll-list-wrap" :style="{height:getWindowHeight+'px'}">
    <cube-scroll
          ref="scrolls"
          :data="followList"
          :options="options"
          @pulling-up="onPullingUp">
          <div class="shop_list_box border-bottom-1px"  v-for="(item,i) in followList" :key="i">
              <div class="shop_list_item">
                  <router-link class="left_fl" tag="div" :to="{ name:'ShopDetails',query:{store_id:item.id,type:'itemFollow'}}">
                      <img :src="item.logo" alt="">
                  </router-link>
                  <div class="right_fl">
                      <div class="right_info">
                          <router-link tag="div" class="right_info_top" :to="{ name:'ShopDetails',query:{store_id:item.id,type:'itemFollow'}}">
                              <h3 class="shop_name">{{item.name}}</h3>
                              <span>{{item.juli}}km</span>
                          </router-link>
                          <p class="shop_info">
                              <!-- {{item.province_name || ""}}
                              {{item.area_name || ""}} -->
                              {{item.address || ""}}
                          </p>
                          <p v-if="item.kf_mobile" class="shop_info">电话：{{item.kf_mobile}}</p>
                          <div class="coupon_list coupon_txt"
                          v-for="(coupon_list,index) in item.coupon_list"
                          @click="receiveCoupon(coupon_list.id,item.id)">
                              <div class="coupon_list_left">
                                  <div class="coupon_list_bg" :style="coupon_list_bg">
                                      <p><i class="coupon_icon" :style="coupon_icon"></i>
                                      {{coupon_list.name}}</p>
                                  </div>
                              </div>
                              <div class="coupon_list_right" :class="coupon_list.isActive ? 'coupon_action':'coupon_none'">
                                  立即领取
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
          </div>
          <p v-if="followList.length == 0" style="margin-top: 2rem;color: #212121;font-size: .56rem;">没有更多数据喔~</p>
        </cube-scroll>
  </div>
</div>
</template>
<script>
export default {
  data() {
        return {
          coupon_list_bg:{
                backgroundImage: "url(" + require("../../assets/coupon_list_bg@2x.png") + ")",
                backgroundRepeat: "no-repeat",
                backgroundSize: "cover"
          },
          coupon_icon:{
              backgroundImage: "url(" + require("../../assets/coupon_icon1@2x.png") + ")",
              backgroundRepeat: "no-repeat",
              backgroundSize: "cover"
          },
          left_box_bg: {
            backgroundImage: "url(" + require("../../assets/left_box_bg@2.png") + ")",
            backgroundRepeat: "no-repeat",
            backgroundSize: "cover"
          },
          followList:[],
          page:1,
        }
    },
    methods:{
        //获取用户关注的店铺列表
        getFollowList:function(){
            let that = this;
            const toast = that.$createToast({
              time: 1000,
              txt: ''
            })
            toast.show()
            let latitude = that.$store.state.latitude;
            let longitude = that.$store.state.longitude;
            if(!latitude && !longitude){
                latitude = "22.72402";
                longitude = "114.260671";
            }
            let page = that.page;
            that.$axios.post("/fang/personal/user_attention",that.$qs.stringify({
                    access_token:that.$store.state._token01,
                    lat:latitude,
                    lng:longitude,
                    page:page,
                }))
                .then(function (response) {
                  console.log('关注店铺列表');
                  console.log(response);
                     toast.hide();
                    let res = response.data;
                    if(res.status == 1){
                        if(res.data.data.length>0){
                            for(var i =0;i<res.data.data.length; i++){
                                for(var j = 0;j<res.data.data[i].coupon_list.length;j++){
                                    res.data.data[i].coupon_list[j].isActive = false;
                                }
                            }
                           res.data.data.forEach(function(v,i){
                              that.followList.push(v);
                           });
                           that.page = parseInt(res.data.current_page)+1;
                        }else{
                          that.$refs.scrolls.forceUpdate();
                        }
                        console.log(that.page);
                        // that.status = status;
                    }else if (res.status == -1) {
                        that.noLogin();
                    }else{
                          // 如果没有新数据
                         that.$refs.scrolls.forceUpdate();
                    }
                })
                .catch(function (error) {
                    console.log(error);
                    that.toast = that.$createToast({
                      txt: error.toString(),
                      type: 'txt'
                })
                that.toast.show()
            });
        },
        receiveCoupon:function(coupon_id,store_id){
            let that = this;
            let url = "/fang/store/user_coupon"
            let _token01 = that.$cookies.get("_token01");
            if(!_token01){
                let host = that.$store.state.host;
                let static_host = location.href.split('#')[0];
                let Base64 = require('js-base64').Base64;
                static_host = Base64.encode(static_host);
                if (/MicroMessenger/.test(window.navigator.userAgent)) {
                    let href_status = "wechat_fang";
                    this.createDialog(host,href_status,static_host)
                }
                else if (/AlipayClient/.test(window.navigator.userAgent)) {
                    let href_status = "ali_fang";
                    this.createDialog(host,href_status,static_host)
                }else{//否者没有存在是在其他浏览器打开的
                    let txt = "请使用微信或者支付宝浏览器进入!";
                    this.toast = this.$createToast({
                      txt: txt,
                      type: 'txt'
                    })
                    this.toast.show()
                }
                return;
            }
            const toast = that.$createToast({
                time: 5000,
                txt: ''
              })
              toast.show()
            that.$axios.post(url,this.$qs.stringify({
                coupon_id:coupon_id,
                access_token:that.$store.state._token01,
            })).then(function(response){
                 toast.hide();
                let res = response.data;
                if(res.status == 1){
                    let content = "领取成功，是否立即去使用";
                    that.showBtn(content,store_id,that);
                    that.coupon_isactive(store_id,coupon_id);
                }
                else if (res.status == -1) {
                    that.noLogin();
                }else{
                    let content = res.msg;
                    that.showToastTxtOnly(content);
                }
            })
            .catch(function(error){
                toast.hide();
            });
        },
        coupon_isactive(store_id,coupon_id){
            var id = this.followList.findIndex(function (x) {
                return x.id === store_id
            })
            var couponid = this.followList[id].coupon_list.findIndex(function (x) {
                return x.id === coupon_id
            })
            this.followList[id].coupon_list[couponid].isActive = true;
            console.log(this.followList,"this.followList");
        },
        createDialog(host,href_status,static_host){
            this.$createDialog({
               type: 'confirm',
               icon: 'cubeic-alert',
               title: '提示信息',
               content: '需要授权才能领取,去授权',
               confirmBtn: {
                 text: '确定',
                 active: true,
                 disabled: false,
                 href: 'javascript:;'
               },
               cancelBtn: {
                 text: '取消',
                 active: false,
                 disabled: false,
                 href: 'javascript:;'
               },
               onConfirm: () => {
                 window.location.href = host+"/fang/auth/"+href_status+"?redirect_uri="+static_host;
               },
               onCancel: () => {

               }
             }).show()
        },
        showToastTxtOnly(text) {
         this.toast = this.$createToast({
           txt: text,
           type: 'txt'
         })
         this.toast.show()
       },
        //使用优惠券
        useCoupon:function(store_id){
            let url = '';
            if(/Alipay/.test(window.navigator.userAgent)) {
                url = this.$store.state.host+'/fang/scanpay/ali?store_id='+store_id;
                window.location.href = url;
            }
            else if (/MicroMessenger/.test(window.navigator.userAgent)) {
                url = this.$store.state.host+'/fang/scanpay/wechat?store_id='+store_id;
                window.location.href = url;
            } else {
                this.showAlert('请使用微信或支付宝支付');
            }
        },
        showBtn(content,store_id,that) {
           this.$createDialog({
             type: 'confirm',
             icon: 'cubeic-alert',
             title: '提示信息',
             content: content,
             confirmBtn: {
               text: '立即使用',
               active: true,
               disabled: false,
               href: 'javascript:;'
             },
             cancelBtn: {
               text: '我再看看',
               active: false,
               disabled: false,
               href: 'javascript:;'
             },
             onConfirm: () => {
               that.useCoupon(store_id);
             },
             onCancel: () => {
             }
         }).show()
       },
       onPullingUp() {
         this.getFollowList();
       // 更新数据
       },
       //上拉配置
       pullUpLoadObj: function() {
           return this.pullUpLoad ? {
             threshold: parseInt(this.pullUpLoadThreshold),
             txt: {
               more: this.pullUpLoadMoreTxt,
               noMore: this.pullUpLoadNoMoreTxt
             }
           } : false
         }
    },
    mounted() {
        this.getFollowList();
    },
    activated:function(){
        //使用keep-alive以后进入页面只会触发activated
        // this.getFollowList();
    },
    computed: {
        options() {
          return {
              pullUpLoad: this.pullUpLoadObj,
              scrollbar: false
          }
        },
         getWindowHeight(){
           return document.documentElement.clientHeight || document.body.clientHeight;
       },

    }
}
</script>
<style scoped>
.shop_list_box{
    margin: 0 0 0 .48rem;
    padding: .52rem .48rem .52rem 0;
    background: #ffffff;
}
.border-bottom-1px::after{
    border-bottom-color: #FFD6D6D6;
}
.shop_list_box .shop_list_item{
        display: flex;
}
.shop_list_box .shop_list_item > .left_fl{
    width: 4.46rem;
    height: 4.16rem;
    flex: none;
}
.shop_list_box .shop_list_item > .left_fl img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop_list_box .shop_list_item > .right_fl{
    flex: 1;
    display: flex;
    overflow: hidden;
}
.shop_list_box .shop_list_item > .right_fl .right_info{
    overflow: hidden;
    width: 100%;
    padding-left: .48rem;
}
.shop_list_box .shop_list_item > .right_fl .right_info_top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
}
.shop_list_box .shop_list_item > .right_fl .right_info_top .shop_name{
    font-size:.64rem;
    font-weight:600;
    color:rgba(4,4,4,1);
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    margin-top: .18rem;
    text-align: left;
}
.shop_list_box .shop_list_item > .right_fl .right_info_top>span{
    font-size:.44rem;
    font-weight:500;
    color:rgba(124,124,124,1);
}
.shop_list_box .shop_list_item > .right_fl .shop_info{
    font-size:.44rem;
    font-weight:500;
    color:rgba(124,124,124,1);
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-top: .38rem;
}
.shop_list_box .shop_list_item > .right_fl .coupon_list{
    text-align: left;
    margin-top: .44rem;
        overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.shop_list_box .shop_list_item > .right_fl .coupon_list .coupon_list_bg{
    width: 5.48rem;
    height: .88rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0 0 0.4rem;
    box-sizing: border-box;
}
.shop_list_box .shop_list_item > .right_fl .coupon_list .coupon_list_bg p{
    overflow: hidden;
    /* text-overflow: ellipsis;
    white-space: nowrap; */
}
.shop_list_box .shop_list_item > .right_fl .coupon_list .coupon_list_bg .coupon_icon{
    display: inline-block;
    width: .44rem;
    height: .44rem;
    vertical-align: middle;
    margin-right: .16rem;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}
.shop_list_box .shop_list_item > .right_fl .coupon_list .coupon_list_left{
    float: left;
}
.shop_list_box .shop_list_item > .right_fl .coupon_list .coupon_list_right{
    width: 2.3rem;
    height: .88rem;
    float: left;
    font-size:.44rem;
    font-weight:600;
    color:rgba(255,255,255,1);
    text-align: center;
    line-height: 1rem;
}
.shop_list_box .shop_list_item > .right_fl .coupon_list .coupon_none{
    background:linear-gradient(153deg,rgba(255,196,56,1),rgba(255,208,95,1));
}
.shop_list_box .shop_list_item > .right_fl .coupon_list .coupon_action{
    background:rgba(236,236,236,1);
}
.shop_list_box .shop_list_item > .right_fl .coupon_list  .received{
    background:rgb(246, 246, 246);
}
.shop_list_box .shop_list_item > .right_fl .coupon_txt{
    font-size:.4rem;
    font-weight:500;
    color:rgba(124,124,124,1);
}
</style>
<style  lang="stylus" rel="stylesheet/stylus">
.scroll-wrapper
  .cube-pulldown-wrapper
    .before-trigger
      font-size: 30px
      line-height: 30px
      align-self: flex-end
      span
        display: inline-block
        transition: all 0.3s
        color: #666
        &.rotate
          transform: rotate(180deg)
    .after-trigger
      .refresh-text
        color: grey
.scroll-list-wrap
  border: 1px solid rgba(0, 0, 0, 0.1)
  border-radius: 5px
  transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
  overflow: hidden
.foods-wrapper
  .food-item
    display: flex
    padding: 18px
    border-bottom: 1px solid rgba(7, 17, 27, 0.1)
    &:last-child
      border-none()
      margin-bottom: 0
    .icon
      flex: 0 0 57px
      margin-right: 10px
    .food-content
      flex: 1
      .name
        margin: 2px 0 8px 0
        height: 14px
        line-height: 14px
        font-size: 14px
        color: rgb(7, 17, 27)
      .description, .extra
        line-height: 10px
        font-size: 10px
        color: rgb(147, 153, 159)
      .description
        line-height: 12px
        margin-bottom: 8px
      .extra
        .count
          margin-right: 12px
      .price
        font-weight: 700
        line-height: 24px
        .now
          margin-right: 8px
          font-size: 14px
          color: rgb(240, 20, 20)
        .old
          text-decoration: line-through
          font-size: 10px
          color: rgb(147, 153, 159)
      .cartcontrol-wrapper
        position: absolute
        right: 0
        bottom: 12px
</style>
